<template>
    <div class="radarInfo">
        <div class="radarInfoWrap">
            <div id="radarChart"></div>
        </div>

    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            newStudentId: '',
            comprehensiveInfo: [],
            chart: null
        }
    },
    props: [
        'studentId'
    ],
    watch: {
        studentId: {
            immediate: true, // 立即触发一次
            handler(newValue) {
                if (newValue) {
                    this.getComprehensiveInfoById(newValue)
                }
            }
        }
    },
    methods: {
        dataChart() {
            if (!this.comprehensiveInfo || this.comprehensiveInfo.length === 0) {
                return;
            }
            if (this.chart) {
                this.chart.dispose();
            }
            var chartDom = document.getElementById('radarChart');
            this.chart = echarts.init(chartDom);
            var option;
            option = {
                tooltip: {
                    formatter: "{a} : {b}分",
                    backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(34, 46, 125, 0.95)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(0, 213, 255, 0.95)'
                        }
                    ]),
                    borderColor: 'rgba(0, 213, 255, 0.5)',
                    borderWidth: 2,
                    textStyle: {
                        color: "#ffffff",
                        fontSize: 16,
                        fontWeight: 'bold',
                        textShadow: '0 0 3px rgba(0, 213, 255, 0.5)'
                    },
                    padding: [12, 18],
                    borderRadius: 8,
                    shadowColor: 'rgba(0, 213, 255, 0.5)',
                    shadowBlur: 15,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0
                },
                series: [{
                    center: ["18.3%", "65%"],
                    radius: "55%",
                    startAngle: 240,
                    endAngle: 30,
                    min: 0,
                    max: 100,
                    splitNumber: 10,
                    axisLine: {
                        lineStyle: {
                            color: [
                                ["1", (function () {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#00d5ff'
                                    }, {
                                        offset: 1,
                                        color: '#ffbe00'
                                    }]);
                                })()],
                                ["1", "#222e7d"]
                            ],
                            width: 10,
                            fontSize: 15.0,
                            shadowBlur: 0,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0
                        }
                    },
                    axisTick: {
                        length: 10,
                        lineStyle: {
                            width: 1
                        },
                        alignWithLabel: false
                    },
                    axisLabel: {
                        color: "#00d5ff",
                        fontSize: 12.0,
                        distance: 8
                    },
                    splitLine: {
                        lineStyle: {
                            width: 3
                        },
                        length: 13
                    },
                    pointer: {
                        length: "70%",
                        width: 10
                    },
                    title: {
                        fontWeight: "bolder",
                        fontSize: 25,
                        color: "#fff",
                        fontStyle: "italic"
                    },
                    detail: {
                        width: '50px',
                        formatter: function (value) {
                            return '知识';
                        },
                        fontSize: 20,
                        color: "#00ffff",
                        offsetCenter: ['10%', '50%']
                    },
                    name: "知识",
                    type: "gauge",
                    z: 3,
                    data: [
                        {
                            value: this.comprehensiveInfo[0].average_mission_score,
                            name: this.comprehensiveInfo[0].average_mission_score
                        }
                    ]
                }, {
                    center: ["81.7%", "65%"],
                    radius: "55%",
                    startAngle: 150,
                    endAngle: -60,
                    min: 0,
                    max: 100,
                    splitNumber: 10,
                    axisLine: {
                        lineStyle: {
                            color: [
                                ["1", (function () {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#00d5ff'
                                    }, {
                                        offset: 1,
                                        color: '#ffbe00'
                                    }]);
                                })()],
                                ["1", "#222e7d"]
                            ],
                            width: 10,
                            fontSize: 15.0,
                            shadowBlur: 0,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0
                        }
                    },
                    axisTick: {
                        length: 10,
                        lineStyle: {
                            width: 1
                        },
                        alignWithLabel: false
                    },
                    axisLabel: {
                        color: "#00d5ff",
                        fontSize: 12.0,
                        distance: 5
                    },
                    splitLine: {
                        lineStyle: {
                            width: 3
                        },
                        length: 13
                    },
                    pointer: {
                        length: "60%",
                        width: 10
                    },
                    title: {
                        fontWeight: "bolder",
                        fontSize: 25,
                        color: "#fff",
                        fontStyle: "italic"
                    },
                    detail: {
                        width: '50px',
                        formatter: function (value) {
                            return '素养'
                        },
                        fontSize: 20,
                        color: "#00ffff",
                        offsetCenter: ['-20%', '50%']
                    },
                    name: "素养",
                    type: "gauge",
                    z: 3,
                    data: [{
                        value: this.comprehensiveInfo[2].average_mission_score,
                        name: this.comprehensiveInfo[2].average_mission_score
                    }]
                }, {
                    center: ["50%", "62%"],
                    radius: "80%",
                    min: 0,
                    max: 100,
                    splitNumber: 10,
                    axisLine: {
                        lineStyle: {
                            color: [
                                ["1", (function () {
                                    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#00d5ff'
                                    }, {
                                        offset: 1,
                                        color: '#ffbe00'
                                    }]);
                                })()],
                                ["1", "#222e7d"]
                            ],
                            width: 15,
                            fontSize: 20.0,
                            shadowBlur: 0,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0
                        }
                    },
                    axisTick: {
                        length: 15,
                        lineStyle: {
                            width: 1
                        },
                        alignWithLabel: false
                    },
                    axisLabel: {
                        color: "#00d5ff",
                        fontSize: 20.0,
                        distance: 5
                    },
                    splitLine: {
                        lineStyle: {
                            width: 3
                        },
                        length: 17
                    },
                    pointer: {
                        length: "70%",
                        width: 10
                    },
                    title: {
                        fontWeight: "bolder",
                        fontSize: 30,
                        color: "#fff",
                        fontStyle: "italic"
                    },
                    detail: {
                        show: true,
                        width: '50px',
                        formatter: function (value) {
                            return '技能';
                        },
                        fontSize: 25,
                        color: "#00ffff",
                        offsetCenter: [0, '50%']
                    },
                    name: "技能",
                    type: "gauge",
                    z: 3,
                    data: [{
                        value: this.comprehensiveInfo[1].average_mission_score,
                        name: this.comprehensiveInfo[1].average_mission_score
                    }]
                }]
            };
            option && this.chart.setOption(option);
        },
        getComprehensiveInfoById(id) {
            this.$axios.get('/students/getComprehensiveInfoById/' + id, {
            }).then(res => {
                this.comprehensiveInfo = res.data.data;
                this.dataChart();
            })
        }
    },
    beforeDestroy() {
        if (this.chart) {
            this.chart.dispose();
            this.chart = null;
        }
    }
}
</script>
<style scoped>
.radarInfo {
    width: 100%;
    height: 100%;
    min-height: 400px;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
}

.radarInfoWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin-top: -8%;
}

#radarChart {
    width: 100%;
    height: 100%;
    min-height: 400px;
}
</style>